<template>
  <div class="menu">
    <el-menu :unique-opened="unique" router class="el-menu-vertical-demo" :style="{height:currHeight + 'px'}">
      <el-submenu v-for="(menuItem,index) in doubleMenu" :key="index" :index="menuItem.id">
        <template slot="title">
          <i :class="menuItem.icon"></i> {{ menuItem.menu_name }}
        </template>
        <el-menu-item
          v-for="(item,index) in menuItem.children"
          :key="index"
          :index="item.id"
          :route="{'path':item.menu_url}">
          <i :class="item.icon"></i> {{ item.menu_name }}
        </el-menu-item>
      </el-submenu>
      <el-menu-item
        v-for="(menuItem,index) in singleMenu"
        :key="index"
        :index="menuItem.id"
        :route="{'path':menuItem.menu_url}">
        <i :class="menuItem.icon"></i> {{menuItem.menu_name}}
      </el-menu-item>

    </el-menu>
  </div>
</template>

<script>
  import { getLeftMenuData, getSubsystem } from '../../assets/file/menu.js'

  export default {
    name: 'menu',
    props: ['type'],
    data () {
      return {
        currHeight: 675,
        singleMenu: [],
        doubleMenu: [],
        unique: true,
      }
    },
    created () {
      console.log(this.type)
      this.getLeftMenuList()
    },
    mounted () {
      this.getLeftMenuList()
    },
    methods: {
      getLeftMenuList () {
        let menuList = new Object()
        let list = ''
        list = JSON.stringify(getSubsystem(this.type))
        menuList = JSON.parse(list)
        menuList = getSubsystem(this.type)
        this.singleMenu = menuList['menu']
        this.doubleMenu = menuList['submenu']
        if (this.type === 'talentexchange') {
          let usertype = localStorage.getItem('user_role_type')
          if (usertype === '个人用户') {
            for (let i = 0, len = this.singleMenu.length; i < len; i++) {
              if (this.singleMenu[i].id === '5') {
                this.singleMenu.splice(i, 1)
              }
            }
          } else if (usertype === '企业用户') {
            for (let i = 0, len = this.singleMenu.length; i < len; i++) {
              if (this.singleMenu[i].id === '1' || this.singleMenu[i].id === '2') {
                this.singleMenu.splice(i, 1)
                console.log(menuList + ';')
              }
            }
          }
        }
      },
      //测试用，正式删
      deepCopyData (data) {

      }
    },
    watch: {
      type (val, oldVal) {
        this.getLeftMenuList()
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
